首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的:
Visualize size of webpack output files with an interactive zoomable treemap.
一个很强大的用来优化打包之后文件提交的工具。
在老版本的脚手架里面已经多帮你配置好了,在 build/webpack.prod.conf.js
文件中:
判断是否配置了 bundleAnalyzerReport,如果配置了,加载 webpack-bundle-analyzer 工具包,调用了 BundleAnalyzerPlugin,最终还是 push 到 plugins 对象中:
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
在 config/index.js
文件中:配置了 build
对象的 bundleAnalyzerReport
module.exports = {
build: {
bundleAnalyzerReport: process.env.npm_config_report
}
}
那在新版本里面,我们在 vue.config.js 中如何配置呢?
第一个想到的还是通过 chainWebpack 配置,再看看它的官方说明:
是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。
允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: config => {
// ...
}
然后是如何通过 config
生成一个 plugin
:
我们查看一下 webpack-chain
插件的 README.md
,有如下一段:
config
.plugin(name)
.use(WebpackPlugin, args)
参照如上格式,有 2 个示例如下:
// Examples
config
.plugin('hot')
.use(webpack.HotModuleReplacementPlugin);
config
.plugin('env')
.use(webpack.EnvironmentPlugin, ['NODE_ENV']);
所以,照着上面的模板,我们也很简单就写出来了:
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
但是还不够,我们需要加一些限制条件,类似老版本脚手架里面的:
if (process.env.npm_config_report) {
// ...
}
然后我们可以在 package.json 中增加 scripts:
key 是:analyz
value 是:npm_config_report=true npm run build
"analyz": "npm_config_report=true npm run build"
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。